<template>
  <!-- 客户洞察 -->
  <div class="cust-home">
    <!-- RFM模型分析 -->
    <div class="main">
      <!-- 主要页面第一部分 -->
      <div class="main-one">
        <div class="one-title">
          {{ $t('dataAnalysis.RMF') }}
        </div>
        <!-- 第一种选择时间栏 -->
        <div class="one-time">
          <div class="time-select">
            <span class="el-form-item">{{ $t('dataAnalysis.timeBefore') }}</span>
            <div class="block el-form-item">
              <el-date-picker
                v-model="value1"
                type="date"
                :placeholder="$t('tip.select')"
                :disabled-date="onDateDisabled"

                class="time-border"
                :picker-options="pickerOptions"
              />
            </div>
            <span class="el-form-item">{{ $t('dataAnalysis.before') }}</span>
            <el-select
              v-model="value2"
              :placeholder="$t('date.a')"
              class="el-form-item"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <span class="el-form-item">{{ $t('dataAnalysis.cusData') }}</span>
          </div>
          <!-- 绑定下面表格数据 -->
          <div class="one-time-right">
            <div
              class="default-btn primary-btn"
              @click="buttonRFM()"
            >
              {{ $t('dataAnalysis.filter') }}
            </div>
          </div>
        </div>
        <div>
          <!-- 按钮的切换，绑定三个数据表格页面 -->
          <div class="one-radio">
            <span class="el-form-item">{{ $t('dataAnalysis.selectIndicators1') }}</span>
            <el-radio-group v-model="radio1">
              <!-- 这里radio1默认绑定了' :label1="1" ',所以最开始默认选中的就是第一个，radio1绑定的就是下面的label值 -->
              <el-radio :label="1">
                {{ $t('dataAnalysis.customersPro') }}
              </el-radio>
              <el-radio :label="2">
                {{ $t('dataAnalysis.cumulativePayment') }}
              </el-radio>
              <el-radio :label="3">
                {{ $t('dataAnalysis.customerUnitPrice') }}
              </el-radio>
            </el-radio-group>
          </div>
        </div>

        <!-- 这个表格有点难弄，先放着，占位先 -->
        <div class="one-table">
          <el-table
            :data="tableData1"
            border
            header-cell-class-name="cust-table-header"
            style="width: 100%"
            :cell-class-name="tableRowClassName"
          >
            <el-table-column
              prop="recencyName"
              :label="$t('dataAnalysis.RF')"
              width="180"
            />
            <el-table-column
              prop="amount1"
              label="F=1"
            >
              <template #default="scope">
                <!-- 点击按钮，响应页面展示就是这部分 -->
                <!-- radio1绑定的就是下面的label值，所以通过v-if条件判断来响应按钮的点击与页面的展示 -->
                <template v-if="radio1 === 1">
                  <span>{{ scope.row.payBuyers1 }} {{ $t('groups.people') }}</span>
                  <br>
                  <span>{{ $t('home.ratio') }}{{ scope.row.payBuyers1Rate }}%</span>
                </template>
                <template v-else-if="radio1 === 2">
                  <span class="row-text">{{ scope.row.payAmount1 }} {{ $t('dataAnalysis.yuan') }}</span>
                </template>
                <template v-else>
                  <span>{{ scope.row.priceSingle1 }} {{ $t('dataAnalysis.yuan') }}</span>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              prop="amount2"
              label="F=2"
            >
              <template #default="scope">
                <template v-if="radio1 === 1">
                  <span>{{ scope.row.payBuyers2 }} {{ $t('groups.people') }}</span>
                  <br>
                  <span>{{ $t('home.ratio') }} {{ scope.row.payBuyers2Rate }}%</span>
                </template>
                <template v-else-if="radio1=== 2">
                  <span>{{ scope.row.payAmount2 }} {{ $t('dataAnalysis.yuan') }}</span>
                </template>
                <template v-else>
                  <span>{{ scope.row.priceSingle2 }} {{ $t('dataAnalysis.yuan') }}</span>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              prop="amount3"
              label="F=3"
            >
              <template #default="scope">
                <template v-if="radio1 === 1">
                  <span>{{ scope.row.payBuyers3 }} {{ $t('groups.people') }}</span>
                  <br>
                  <span>{{ $t('home.ratio') }} {{ scope.row.payBuyers3Rate }}%</span>
                </template>
                <template v-else-if="radio1 === 2">
                  <span>{{ scope.row.payAmount3 }} {{ $t('dataAnalysis.yuan') }}</span>
                </template>
                <template v-else>
                  <span>{{ scope.row.priceSingle3 }} {{ $t('dataAnalysis.yuan') }}</span>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              prop="amount4"
              label="F=4"
            >
              <template #default="scope">
                <template v-if="radio1 === 1">
                  <span>{{ scope.row.payBuyers4 }} {{ $t('groups.people') }}</span>
                  <br>
                  <span>{{ $t('home.ratio') }} {{ scope.row.payBuyers4Rate }}%</span>
                </template>
                <template v-else-if="radio1 === 2">
                  <span>{{ scope.row.payAmount4 }} {{ $t('dataAnalysis.yuan') }}</span>
                </template>
                <template v-else>
                  <span>{{ scope.row.priceSingle4 }} {{ $t('dataAnalysis.yuan') }}</span>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              prop="amount5"
              label="F>=5"
            >
              <template #default="scope">
                <template v-if="radio1 === 1">
                  <span>{{ scope.row.payBuyers5 }} {{ $t('groups.people') }}</span>
                  <br>
                  <span>{{ $t('home.ratio') }} {{ scope.row.payBuyers5Rate }}%</span>
                </template>
                <template v-else-if="radio1 === 2">
                  <span>{{ scope.row.payAmount5 }} {{ $t('dataAnalysis.yuan') }}</span>
                </template>
                <template v-else>
                  <span>{{ scope.row.priceSingle5 }} {{ $t('dataAnalysis.yuan') }}</span>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              prop="amountAll"
              :label="$t('dataAnalysis.rowTotal')"
            >
              <template #default="scope">
                <template v-if="radio1 === 1">
                  <span>{{ scope.row.payBuyersTotal }} {{ $t('groups.people') }}</span>
                  <br>
                  <span>{{ $t('home.ratio') }} {{ scope.row.payBuyersTotalRate }}%</span>
                </template>
                <template v-else-if="radio1 === 2">
                  <span>{{ scope.row.payAmountTotal }} {{ $t('dataAnalysis.yuan') }}</span>
                </template>
                <template v-else>
                  <span>{{ scope.row.priceSingleTotal }} {{ $t('dataAnalysis.yuan') }}</span>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 主要页面第二部分 -->
      <div class="main-one">
        <div class="one-title">
          {{ $t('dataAnalysis.analysisOfConsumptionCapacity') }}
        </div>
        <div class="one-time two-time">
          <div>
            <!-- 第二种时间选择栏 -->
            <span class="el-form-item">{{ $t('order.paymentTime') }}</span>
            <div class="block el-form-item">
              <el-date-picker
                v-model="dateValue2StartTime"
                type="date"
                :placeholder="$t('date.start')"
                class="time-border"
                :picker-options="pickerBeforeMonthOptions"
              />
            </div>
            <span class="el-form-item">{{ $t('date.tip') }}</span>
            <div class="block el-form-item">
              <el-date-picker
                v-model="dateValue2EndTime"
                type="date"
                :placeholder="$t('date.end')"
                class="time-border"
                :picker-options="pickerBeforeMonthOptions"
              />
            </div>
            <span class="el-form-item">{{ $t('dataAnalysis.newOrOld') }}</span>
            <el-select
              v-model="value3"
              :placeholder="$t('dataAnalysis.allCus')"
              class="el-form-item"
            >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="one-time-right">
            <div
              class="default-btn primary-btn"
              @click="payAmountDistribution()"
            >
              {{ $t('dataAnalysis.filter') }}
            </div>
          </div>
        </div>
        <div class="main-two-text">
          <div>
            <span>{{ $t('dataAnalysis.payAmountMap') }}</span>
          </div>
          <p>{{ $t('dataAnalysis.mapText') }}</p>
        </div>
        <div>
          <!-- 三个按钮绑定三个不同的数据图 -->
          <div class="one-radio">
            <span class="el-form-item">{{ $t('dataAnalysis.selectIndicators1') }}</span>
            <el-radio-group v-model="radio2">
              <el-radio :label="1">
                {{ $t('dataAnalysis.customers') }}
              </el-radio>
              <el-radio :label="2">
                {{ $t('dataAnalysis.totalPayment') }}
              </el-radio>
              <el-radio :label="3">
                {{ $t('dataAnalysis.goodsPaid') }}
              </el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- 第二部分柱形数据图 -->
        <div class="main-two-chart">
          <common-chart
            v-if="consumeFrequencyChart.show"
            :options="consumeFrequencyChart.options"
            style="width: 100%; height: 200px"
          />
        </div>
        <div class="main-two-text">
          <div>
            <span>{{ $t('dataAnalysis.payment') }}</span>
          </div>
        </div>
        <!-- 支付金额数据表 -->
        <div class="main-two-table">
          <el-table
            :data="tableData2"
            header-cell-class-name="table-header"
            row-class-name="table-row-row"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="section"
              :label="$t('dataAnalysis.amountRange')"
              width="180"
            />
            <el-table-column
              prop="custs"
              :label="$t('dataAnalysis.customers')"
              width="180"
            />
            <el-table-column
              prop="custPro"
              :label="$t('dataAnalysis.customPro')"
            />
            <el-table-column
              prop="commons"
              :label="$t('dataAnalysis.goodsPaid')"
            />
            <el-table-column
              prop="pers"
              :label="$t('dataAnalysis.perCapitaPaidCounts')"
            />
            <el-table-column
              prop="payment"
              :label="$t('dataAnalysis.totalPaymentYuan')"
            />
            <el-table-column
              prop="paymentPro"
              :label="$t('dataAnalysis.payTotalPro')"
            />
          </el-table>
        </div>
      </div>

      <!-- 主要页面第三部分 -->
      <div class="main-one">
        <div class="one-title">
          {{ $t('dataAnalysis.cFA') }}
        </div>
        <div class="one-time two-time">
          <div>
            <span class="el-form-item">{{ $t('order.paymentTime') }}</span>
            <div class="block el-form-item">
              <el-date-picker
                v-model="dateValue3StartTime"
                type="date"
                :placeholder="$t('date.start')"
                class="time-border"
                :picker-options="pickerBeforeMonthOptions"
              />
            </div>
            <span class="el-form-item">{{ $t('date.tip') }}</span>
            <div class="block el-form-item">
              <el-date-picker
                v-model="dateValue3EndTime"
                type="date"
                :placeholder="$t('date.end')"
                class="time-border"
                :picker-options="pickerBeforeMonthOptions"
              />
            </div>
            <span class="el-form-item">{{ $t('dataAnalysis.newOrOld') }}</span>
            <el-select
              v-model="value4"
              :placeholder="$t('dataAnalysis.allCus')"
              class="el-form-item"
            >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="one-time-right">
            <div
              class="default-btn primary-btn"
              @click="getConsumeFreAnalysis()"
            >
              {{ $t('dataAnalysis.filter') }}
            </div>
          </div>
        </div>
        <div class="main-two-text">
          <div>
            <span>{{ $t('dataAnalysis.buyDis') }}</span>
          </div>
        </div>
        <div>
          <div class="one-radio">
            <span class="el-form-item">{{ $t('dataAnalysis.selectIndicators1') }}</span>
            <el-radio-group v-model="radio3">
              <el-radio :label="1">
                {{ $t('dataAnalysis.customers') }}
              </el-radio>
              <el-radio :label="2">
                {{ $t('dataAnalysis.totalPayment') }}
              </el-radio>
              <el-radio :label="3">
                {{ $t('dataAnalysis.goodsPaid') }}
              </el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="main-two-chart">
          <common-chart
            v-if="payAmountChart.show"
            class="refund-chart"
            :options="payAmountChart.options"
            style="width: 100%; height: 200px"
          />
        </div>
        <div class="main-two-text">
          <div>
            <span>{{ $t('dataAnalysis.buyDet') }}</span>
          </div>
        </div>
        <div class="main-two-table">
          <el-table
            :data="tableData3"
            header-cell-class-name="table-header"
            row-class-name="table-row-row"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="times"
              :label="$t('dataAnalysis.buyTimes')"
              width="180"
            />
            <el-table-column
              prop="custs"
              :label="$t('dataAnalysis.customers')"
              width="180"
            />
            <el-table-column
              prop="custPro"
              :label="$t('dataAnalysis.customPro')"
            />
            <el-table-column
              prop="commons"
              :label="$t('dataAnalysis.goodsPaid')"
            />
            <el-table-column
              prop="pers"
              :label="$t('dataAnalysis.perCapitaPaidCounts')"
            />
            <el-table-column
              prop="payment"
              :label="$t('dataAnalysis.totalPaymentYuan')"
            />
            <el-table-column
              prop="paymentPro"
              :label="$t('dataAnalysis.payTotalPro')"
            />
          </el-table>
        </div>
      </div>

      <!-- 主要页面第四部分 -->
      <div class="main-one">
        <div class="one-title">
          {{ $t('dataAnalysis.cycAnalysis') }}
        </div>
        <div class="one-time two-time three-time">
          <div>
            <span class="el-form-item">{{ $t('order.paymentTime') }}</span>
            <div class="block el-form-item">
              <el-date-picker
                v-model="dateValue4StartTime"
                type="date"
                :placeholder="$t('date.start')"
                class="time-border"
                :picker-options="pickerBeforeMonthOptions"
              />
            </div>
            <span class="el-form-item">{{ $t('date.tip') }}</span>
            <div class="block el-form-item">
              <el-date-picker
                v-model="dateValue4EndTime"
                type="date"
                :placeholder="$t('date.end')"
                class="time-border"
                :picker-options="pickerBeforeMonthOptions"
              />
            </div>
            <span class="el-form-item">{{ $t('dataAnalysis.newOrOld') }}</span>
            <el-select
              v-model="value5"
              :placeholder="$t('dataAnalysis.allCus')"
              class="el-form-item"
            >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="one-time-right">
            <div
              class="default-btn primary-btn"
              @click="getConsumeRepurchaseCount()"
            >
              {{ $t('dataAnalysis.filter') }}
            </div>
          </div>
        </div>

        <div>
          <!-- 这里是绑定一个天数的获取 -->
          <div class="one-radio two-radio">
            <span class="el-form-item">{{ $t('dataAnalysis.cycInt') }}</span>
            <el-radio-group
              v-model="radio4"
              @change="changeRepurchaseCount()"
            >
              <el-radio :label="10">
                {{ $t('dataAnalysis.tenDays') }}
              </el-radio>
              <el-radio :label="30">
                {{ $t('dataAnalysis.thirtyDays') }}
              </el-radio>
            </el-radio-group>
          </div>
          <!-- 这里是绑定下面表格的数据图切换 -->
          <div class="one-radio two-radio">
            <span class="el-form-item">{{ $t('dataAnalysis.selectIndicators1') }}</span>
            <el-radio-group v-model="radio5">
              <el-radio :label="1">
                {{ $t('dataAnalysis.payM') }}
              </el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- 默认第一个数据图 -->
        <div class="main-two-table">
          <el-table
            :data="tableData4"
            header-cell-class-name="table-header"
            row-class-name="table-row-row"
            stripe
            style="width: 100%; margin: 20px 0"
          >
            <el-table-column
              prop="custs"
              :label="$t('dataAnalysis.customers')"
              width="180"
            />
            <el-table-column
              prop="custPro"
              :label="$t('dataAnalysis.customPro')"
            />
            <el-table-column
              prop="commons"
              :label="$t('dataAnalysis.cumulativeProportion')"
            />
            <el-table-column
              prop="pers"
              :label="$t('dataAnalysis.totalAvg')"
            />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import moment from 'moment'
import { ElMessage } from 'element-plus'
// 对可选日进行判断
const onDateDisabled = (time) => {
  return time.getTime() > moment().add(-1, 'days').valueOf() // 之后不可选
}
// 时间的点击获取，目前设计是只统计最近两年时间的数据
const pickerOptions = {
  disabledDate (time) {
    const date = moment().startOf('days').valueOf()
    // 当前时间前两年的时间
    const preYearDate = moment().subtract(2, 'years').valueOf()
    return (
      time.getTime() > date ||
      time.getTime() < preYearDate
    )
  }
}
// 当前时间 14天至昨天的时间点禁止选择其他时间
const pickerBeforeMonthOptions = {
  disabledDate (time) {
    const date = moment().startOf('days').valueOf()
    return (
      time.getTime() > date
    )
  }
}
// 切换按钮的静态数据
const options1 = [{
  value: 0,
  label: $t('date.a')
}, {
  value: 1,
  label: $t('dataAnalysis.aYear')
}]
const options2 = [{
  value: 0,
  label: $t('dataAnalysis.allCus')
}, {
  value: 1,
  label: $t('dataAnalysis.newCus')
}, {
  value: 2,
  label: $t('dataAnalysis.oldCus')
}]
// 第一个大表格的数据
let tableData1 = [
  {
    recencyName: 'R<=30',
    amount1: 0,
    amount2: 0,
    amount3: 0,
    amount4: 0,
    amount5: 0,
    amountAll: 0,
    frequency: 0,
    payAmount1: 0,
    payBuyers1: 0,
    payBuyers1Rate: 0,
    priceSingle1: 0,
    payAmount2: 0,
    payBuyers2: 0,
    payBuyers2Rate: 0,
    priceSingle2: 0,
    payAmount3: 0,
    payBuyers3: 0,
    payBuyers3Rate: 0,
    priceSingle3: 0,
    payAmount4: 0,
    payBuyers4: 0,
    payBuyers4Rate: 0,
    priceSingle4: 0,
    payAmount5: 0,
    payBuyers5: 0,
    payBuyers5Rate: 0,
    priceSingle5: 0,
    recency: 0,
    payAmountTotal: 0,
    payBuyersTotal: 0,
    payBuyersTotalRate: 0,
    priceSingleTotal: 0
  },
  {
    recencyName: '30<R<=90',
    amount1: 0,
    amount2: 0,
    amount3: 0,
    amount4: 0,
    amount5: 0,
    amountAll: 0,
    frequency: 0,
    payAmount1: 0,
    payBuyers1: 0,
    payBuyers1Rate: 0,
    priceSingle1: 0,
    payAmount2: 0,
    payBuyers2: 0,
    payBuyers2Rate: 0,
    priceSingle2: 0,
    payAmount3: 0,
    payBuyers3: 0,
    payBuyers3Rate: 0,
    priceSingle3: 0,
    payAmount4: 0,
    payBuyers4: 0,
    payBuyers4Rate: 0,
    priceSingle4: 0,
    payAmount5: 0,
    payBuyers5: 0,
    payBuyers5Rate: 0,
    priceSingle5: 0,
    recency: 0,
    payAmountTotal: 0,
    payBuyersTotal: 0,
    payBuyersTotalRate: 0,
    priceSingleTotal: 0
  },
  {
    recencyName: '90<R<=180',
    amount1: 0,
    amount2: 0,
    amount3: 0,
    amount4: 0,
    amount5: 0,
    amountAll: 0,
    frequency: 0,
    payAmount1: 0,
    payBuyers1: 0,
    payBuyers1Rate: 0,
    priceSingle1: 0,
    payAmount2: 0,
    payBuyers2: 0,
    payBuyers2Rate: 0,
    priceSingle2: 0,
    payAmount3: 0,
    payBuyers3: 0,
    payBuyers3Rate: 0,
    priceSingle3: 0,
    payAmount4: 0,
    payBuyers4: 0,
    payBuyers4Rate: 0,
    priceSingle4: 0,
    payAmount5: 0,
    payBuyers5: 0,
    payBuyers5Rate: 0,
    priceSingle5: 0,
    recency: 0,
    payAmountTotal: 0,
    payBuyersTotal: 0,
    payBuyersTotalRate: 0,
    priceSingleTotal: 0
  },
  {
    recencyName: '180<R<=365',
    amount1: 0,
    amount2: 0,
    amount3: 0,
    amount4: 0,
    amount5: 0,
    amountAll: 0,
    frequency: 0,
    payAmount1: 0,
    payBuyers1: 0,
    payBuyers1Rate: 0,
    priceSingle1: 0,
    payAmount2: 0,
    payBuyers2: 0,
    payBuyers2Rate: 0,
    priceSingle2: 0,
    payAmount3: 0,
    payBuyers3: 0,
    payBuyers3Rate: 0,
    priceSingle3: 0,
    payAmount4: 0,
    payBuyers4: 0,
    payBuyers4Rate: 0,
    priceSingle4: 0,
    payAmount5: 0,
    payBuyers5: 0,
    payBuyers5Rate: 0,
    priceSingle5: 0,
    recency: 0,
    payAmountTotal: 0,
    payBuyersTotal: 0,
    payBuyersTotalRate: 0,
    priceSingleTotal: 0
  },
  {
    recencyName: 'R>365',
    amount1: 0,
    amount2: 0,
    amount3: 0,
    amount4: 0,
    amount5: 0,
    amountAll: 0,
    frequency: 0,
    payAmount1: 0,
    payBuyers1: 0,
    payBuyers1Rate: 0,
    priceSingle1: 0,
    payAmount2: 0,
    payBuyers2: 0,
    payBuyers2Rate: 0,
    priceSingle2: 0,
    payAmount3: 0,
    payBuyers3: 0,
    payBuyers3Rate: 0,
    priceSingle3: 0,
    payAmount4: 0,
    payBuyers4: 0,
    payBuyers4Rate: 0,
    priceSingle4: 0,
    payAmount5: 0,
    payBuyers5: 0,
    payBuyers5Rate: 0,
    priceSingle5: 0,
    recency: 0,
    payAmountTotal: 0,
    payBuyersTotal: 0,
    payBuyersTotalRate: 0,
    priceSingleTotal: 0
  },
  {
    recencyName: $t('dataAnalysis.colTotal'),
    amount1: 0,
    amount2: 0,
    amount3: 0,
    amount4: 0,
    amount5: 0,
    amountAll: 0,
    frequency: 0,
    payAmount1: 0,
    payBuyers1: 0,
    payBuyers1Rate: 0,
    priceSingle1: 0,
    payAmount2: 0,
    payBuyers2: 0,
    payBuyers2Rate: 0,
    priceSingle2: 0,
    payAmount3: 0,
    payBuyers3: 0,
    payBuyers3Rate: 0,
    priceSingle3: 0,
    payAmount4: 0,
    payBuyers4: 0,
    payBuyers4Rate: 0,
    priceSingle4: 0,
    payAmount5: 0,
    payBuyers5: 0,
    payBuyers5Rate: 0,
    priceSingle5: 0,
    recency: 0,
    payAmountTotal: 0,
    payBuyersTotal: 0,
    payBuyersTotalRate: 0,
    priceSingleTotal: 0
  }
]
const tableData2 = [{
  section: $t('dataAnalysis.zeroTo50'),
  custs: '1',
  custPro: '100%',
  commons: '1',
  pers: '1',
  payment: '0.01',
  paymentPro: '100%'
}]
const tableData3 = [{
  times: $t('dataAnalysis.buyOne'),
  custs: '1',
  custPro: '100%',
  commons: '1',
  pers: '1',
  payment: '0.01',
  paymentPro: '100%'
}]
const tableData4 = reactive([{
  times: $t('dataAnalysis.notRebuy'),
  custs: '1',
  custPro: '100%',
  commons: '100%',
  pers: '0.01'
}])
// 一些默认的静态的传参
const radio1 = ref(1)
const radio5 = ref(1)
const radio2 = ref(1)
watch(radio2, () => {
  radio2Switch()
})
const dateValue2StartTime = ref('')
const dateValue2EndTime = ref('')
const dateValue3StartTime = ref('')
const dateValue3EndTime = ref('')
const dateValue4StartTime = ref('')
const dateValue4EndTime = ref('')
const value1 = ref('')
onMounted(() => {
  // 两个动态数据图的初始化调用
  getMainTwoChart()
  getMainThreeChart()
  // 数据初始化, RFM模型分析
  value1.value = moment().endOf('days').format('LL')
  const start = moment().add(-1, 'month').startOf('days').valueOf()
  const end = moment().format('L')
  // 数据初始化，消费能力分析
  dateValue2StartTime.value = start
  dateValue2EndTime.value = end
  dateValue3StartTime.value = start
  dateValue3EndTime.value = end
  dateValue4StartTime.value = start
  dateValue4EndTime.value = end
  payAmountDistribution()
  getConsumeFreAnalysis()
  getConsumeRepurchaseCount()
  buttonRFM()
})

/**
 * 请求数据
 */
const value2 = ref(0)

const buttonRFM = () => {
  if (!value1.value) {
    return ElMessage.error($t('dataAnalysis.latestPayTime'))
  }
  http({
    url: http.adornUrl('/admin/customerAnalysis/getCustomerRFMSecond'),
    method: 'get',
    params: http.adornParams(
      {
        recentTime: moment(value1.value).format('LL'),
        type: value2.value
      }
    )
  }).then(({ data }) => {
    if (data) {
      tableData1 = data
      tableData1.forEach(i => {
        if (i.payBuyers1Rate) {
          i.payBuyers1Rate = (i.payBuyers1Rate * 100).toFixed(2)
        }
        if (i.payBuyers2Rate) {
          i.payBuyers2Rate = (i.payBuyers2Rate * 100).toFixed(2)
        }
        if (i.payBuyers3Rate) {
          i.payBuyers3Rate = (i.payBuyers3Rate * 100).toFixed(2)
        }
        if (i.payBuyers4Rate) {
          i.payBuyers4Rate = (i.payBuyers4Rate * 100).toFixed(2)
        }
        if (i.payBuyers5Rate) {
          i.payBuyers5Rate = (i.payBuyers5Rate * 100).toFixed(2)
        }
        if (i.payBuyersTotalRate) {
          if (i.payBuyersTotalRate === 1) {
            i.payBuyersTotalRate = (i.payBuyersTotalRate * 100).toFixed(0)
          } else {
            i.payBuyersTotalRate = (i.payBuyersTotalRate * 100).toFixed(2)
          }
        }
      })
    }
  })
}
// echart的两个数据图，有点难搞！
// 第二部分的Echart图
let value3Temp = 0
const trendTwoRight = {
  newValue: 0,
  oldValue: 0
}
const trendTwoTipRate = [0, 0]
let trendTwoRightType = $t('groups.people')
const consumeFrequencyChart = reactive({
  options: {},
  show: false
})
const getMainTwoChart = () => {
  consumeFrequencyChart.options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: ''
      },
      formatter: function (params) {
        let res = '<div><p>' + '</p></div>'
        if (value3Temp === 1) {
          res +=
            '<p>' + params[0].marker + params[0].seriesName + '：' + params[0].data + '&emsp;' + trendTwoTipRate[0] + '</p>'
        } else if (value3Temp === 2) {
          res +=
            '<p>' + params[1].marker + params[1].seriesName + '：' + params[1].data + '&emsp;' + trendTwoTipRate[1] + '</p>'
        } else {
          for (let i = 0; i < params.length; i++) {
            res +=
              '<p>' + params[i].marker + params[i].seriesName + '：' + params[i].data + '&emsp;' + trendTwoTipRate[i] + '</p>'
          }
        }
        return res
      }
    },
    grid: {
      left: '3%',
      top: '4%',
      bottom: '4%',
      containLabel: true
    },
    xAxis: {
      show: false,
      type: 'value'
    },
    yAxis: {
      type: 'category',
      // 静态
      data: [tableData2[0].section]
    },
    series: [
      {
        label: {
          show: true,
          position: 'right',
          formatter: function (params) {
            if (value3Temp === 2) {
              return ''
            } else {
              return params.data + trendTwoRightType
            }
          },
          color: '#000'
        },
        name: $t('dataAnalysis.nCus'),
        type: 'bar',
        data: [trendTwoRight.newValue],
        // barWidth: 设置宽度大小
        barWidth: 20,
        // 设置颜色
        itemStyle: {
          normal: {
            color: function (params) {
              // build a color map as your need.
              const colorList = [
                '#00B0FF'
              ]
              return colorList[params.dataIndex]
            }
          }
        }
      },
      {
        label: {
          show: true,
          position: 'right',
          formatter: function (params) {
            if (value3Temp === 1) {
              return ''
            } else {
              return params.data + trendTwoRightType
            }
          },
          color: '#000'
        },
        name: $t('dataAnalysis.oCus'),
        type: 'bar',
        data: [trendTwoRight.oldValue],
        // barWidth: 设置宽度大小
        barWidth: 20,
        // 设置颜色
        itemStyle: {
          normal: {
            color: function (params) {
              const colorList = [
                '#3DD86B'
              ]
              return colorList[params.dataIndex]
            }
          }
        }
      }]
  }
  if (value3Temp === 1) {
    consumeFrequencyChart.options.series[0].label.show = true
    consumeFrequencyChart.options.series[1].label.show = false
  } else if (value3Temp === 2) {
    consumeFrequencyChart.options.series[0].label.show = false
    consumeFrequencyChart.options.series[1].label.show = true
  } else {
    consumeFrequencyChart.options.series[0].label.show = true
    consumeFrequencyChart.options.series[1].label.show = true
  }
  consumeFrequencyChart.show = true
}
/**
 * 第二部分请求数据
 */
const value3 = ref(0)
let payBuyersTotal1 = 0
let payAmountTotal1 = 0
const twoSourceData = ref({
  end: 0,
  newPayAmount: 0,
  newPayBuyers: 0,
  newPayProdCount: 0,
  oldPayAmount: 0,
  oldPayBuyers: 0,
  oldPayProdCount: 0,
  start: 0
})
let twoAllProdCount = 0

const payAmountDistribution = () => {
  if (!dateValue2StartTime.value) {
    return ElMessage.error($t('dataAnalysis.PTST'))
  }
  if (!dateValue2EndTime.value) {
    return ElMessage.error($t('dataAnalysis.PTET'))
  }
  http({
    url: http.adornUrl('/admin/customerAnalysis/getConsumePower'),
    method: 'get',
    params: http.adornParams(
      {
        startTime: moment(dateValue2StartTime.value).format('LL'),
        endTime: moment(dateValue2EndTime.value).format('LL'),
        type: value3.value
      }
    )
  }).then(({ data }) => {
    if (data) {
      value3Temp = Number(value3.value)
      twoSourceData.value = data
      const payBuyers = data.newPayBuyers + data.oldPayBuyers
      const prodCount = data.newPayProdCount + data.oldPayProdCount
      const payAmountTotal = data.newPayAmount + data.oldPayAmount
      tableData2[0].section = '0~' + data.end + $t('dataAnalysis.yuan')
      tableData2[0].custs = payBuyers + ''
      tableData2[0].commons = prodCount
      if (payBuyers <= 0) {
        tableData2[0].pers = 0
      } else {
        tableData2[0].pers = (prodCount / payBuyers).toFixed(0)
      }
      tableData2[0].payment = payAmountTotal.toFixed(2)
      if (value3.value === 0) {
        twoAllProdCount = prodCount
        payBuyersTotal1 = payBuyers
        payAmountTotal1 = payAmountTotal
        if (tableData2[0].custs > 0) {
          tableData2[0].custPro = 100 + '%'
        } else {
          tableData2[0].custPro = 0 + '%'
        }
        if (payAmountTotal <= 0) {
          tableData2[0].paymentPro = 0 + '%'
        } else {
          tableData2[0].paymentPro = 100 + '%'
        }
      } else {
        tableData2[0].custPro = ((payBuyers / payBuyersTotal1) * 100).toFixed(2) + '%'
        tableData2[0].paymentPro = ((payAmountTotal / payAmountTotal1) * 100).toFixed(2) + '%'
      }
    }
    radio2Switch()
  })
}

// 第三部分的Echart图
let value4Temp = 0
let thirdLeftData2 = []

let trendThreeRightType = $t('groups.people')
const trendThreeTipRate = [0, 0]
const trendThreeRight = {
  newValue: 0,
  oldValue: 0
}
const payAmountChart = reactive({
  options: {},
  show: false
})
const getMainThreeChart = () => {
  payAmountChart.options = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: ''
      },
      formatter: function (params) {
        let res = '<div><p>' + '</p></div>'
        if (value4Temp === 1) {
          res +=
            '<p>' + params[0].marker + params[0].seriesName + '：' + params[0].data + '&emsp;' + trendThreeTipRate[0] + '</p>'
        } else if (value4Temp === 2) {
          res +=
            '<p>' + params[1].marker + params[1].seriesName + '：' + params[1].data + '&emsp;' + trendThreeTipRate[1] + '</p>'
        } else {
          for (let i = 0; i < params.length; i++) {
            res +=
              '<p>' + params[i].marker + params[i].seriesName + '：' + params[i].data + '&emsp;' + trendThreeTipRate[i] + '</p>'
          }
        }
        return res
      }
    },
    grid: {
      left: '3%',
      top: '4%',
      bottom: '4%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: thirdLeftData2
    },
    series: [
      {
        label: {
          show: true,
          position: 'right',
          formatter: function (params) {
            if (value4Temp === 2) {
              return ''
            } else {
              return params.data + trendThreeRightType
            }
          },
          color: '#000'
        },
        name: $t('dataAnalysis.nCus'),
        type: 'bar',
        data: [trendThreeRight.newValue],
        barWidth: 20,
        itemStyle: {
          normal: {
            color: function (params) {
              // build a color map as your need.
              const colorList = [
                '#00B0FF'
              ]
              return colorList[params.dataIndex]
            }
          }
        }
      },
      {
        label: {
          show: true,
          position: 'right',
          formatter: function (params) {
            if (value4Temp === 1) {
              return ''
            } else {
              return params.data + trendThreeRightType
            }
          },
          color: '#000'
        },
        name: $t('dataAnalysis.oCus'),
        type: 'bar',
        data: [trendThreeRight.oldValue],
        barWidth: 20,
        itemStyle: {
          normal: {
            color: function (params) {
              // build a color map as your need.
              const colorList = [
                '#3DD86B'
              ]
              return colorList[params.dataIndex]
            }
          }
        }
      }
    ]
  }
  if (value4Temp === 1) {
    payAmountChart.options.series[0].label.show = true
    payAmountChart.options.series[1].label.show = false
  } else if (value4Temp === 2) {
    payAmountChart.options.series[0].label.show = false
    payAmountChart.options.series[1].label.show = true
  } else {
    payAmountChart.options.series[0].label.show = true
    payAmountChart.options.series[1].label.show = true
  }
  payAmountChart.show = true
}
/**
 * 第三部分请求数据, 消费频次分析
 */
let threeAllProdCount = 0
const value4 = ref(0)
let payBuyersTotal2 = 0
let payAmountTotal2 = 0

let threeSourceData = {
  end: 0,
  newPayAmount: 0,
  newPayBuyers: 0,
  newPayProdCount: 0,
  oldPayAmount: 0,
  oldPayBuyers: 0,
  oldPayProdCount: 0,
  start: 0
}
const getConsumeFreAnalysis = () => {
  if (!dateValue3StartTime.value) {
    return ElMessage.error($t('dataAnalysis.PTST'))
  }
  if (!dateValue3EndTime.value) {
    return ElMessage.error($t('dataAnalysis.PTET'))
  }
  http({
    url: http.adornUrl('/admin/customerAnalysis/getConsumeFrequency'),
    method: 'get',
    params: http.adornParams(
      {
        startTime: moment(dateValue3StartTime.value).format('LL'),
        endTime: moment(dateValue3EndTime.value).format('LL'),
        type: value4.value
      }
    )
  }).then(({ data }) => {
    if (data) {
      value4Temp = Number(value4.value)
      threeSourceData = data
      tableData3[0].times = data.end
      thirdLeftData2 = [$t('dataAnalysis.buy') + data.end + $t('dataAnalysis.times')]
      const payBuyers = data.newPayBuyers + data.oldPayBuyers
      const prodCount = data.newPayProdCount + data.oldPayProdCount
      const payAmountTotal = data.newPayAmount + data.oldPayAmount
      tableData3[0].custs = payBuyers + ''
      tableData3[0].commons = prodCount
      if (payBuyers <= 0) {
        tableData3[0].pers = 0
      } else {
        tableData3[0].pers = (prodCount / payBuyers).toFixed(0)
      }
      tableData3[0].payment = payAmountTotal.toFixed(2)
      if (value4.value === 0) {
        threeAllProdCount = prodCount
        payBuyersTotal2 = payBuyers
        payAmountTotal2 = payAmountTotal
        if (tableData3[0].custs > 0) {
          tableData3[0].custPro = 100 + '%'
        } else {
          tableData3[0].custPro = 0 + '%'
        }
        if (payAmountTotal <= 0) {
          tableData3[0].paymentPro = 0 + '%'
        } else {
          tableData3[0].paymentPro = 100 + '%'
        }
      } else {
        tableData3[0].custPro = ((payBuyers / payBuyersTotal2) * 100).toFixed(2) + '%'
        tableData3[0].paymentPro = ((payAmountTotal / payAmountTotal2) * 100).toFixed(2) + '%'
      }
      radio3Switch()
    }
  })
}
/**
 * 请求数据，回购周期分析
 */
const value5 = ref(0)
const radio4 = ref(10)
let payBuyersTotal3 = 0
let payProdCountTotal3 = 0

const getConsumeRepurchaseCount = () => {
  if (!dateValue4StartTime.value) {
    return ElMessage.error($t('dataAnalysis.PTST'))
  }
  if (!dateValue4EndTime.value) {
    return ElMessage.error($t('dataAnalysis.PTET'))
  }
  http({
    url: http.adornUrl('/admin/customerAnalysis/getConsumeRepurchaseCount'),
    method: 'get',
    params: http.adornParams(
      {
        startTime: moment(dateValue4StartTime.value).format('LL'),
        endTime: moment(dateValue4EndTime.value).format('LL'),
        type: value5.value,
        cycle: radio4.value
      }
    )
  }).then(({ data }) => {
    if (data) {
      if (value5.value === 0) {
        payBuyersTotal3 = data.detail[0].payBuyers
        payProdCountTotal3 = data.detail[0].payProdCount
      }
      tableData4[0].custs = data.detail[0].payBuyers
      if (data.detail[0].payBuyers === 0) {
        tableData4[0].custPro = 0 + '%'
        // 人均消费
        tableData4[0].pers = 0
      } else {
        // 人均消费
        tableData4[0].pers = (data.detail[0].payAmount / data.detail[0].payBuyers).toFixed(2)
        if (value5.value === 0) {
          tableData4[0].custPro = 100 + '%'
        } else {
          tableData4[0].custPro = ((data.detail[0].payBuyers / payBuyersTotal3) * 100).toFixed(2) + '%'
        }
      }
      if (data.detail[0].payProdCount === 0) {
        tableData4[0].commons = 0 + '%'
      } else {
        if (value5.value === 0) {
          tableData4[0].commons = 100 + '%'
        } else {
          tableData4[0].commons = ((data.detail[0].payProdCount / payProdCountTotal3) * 100).toFixed(2) + '%'
        }
      }
    }
  })
}
const changeRepurchaseCount = () => {
  getConsumeRepurchaseCount()
}
/**
 * 表格样式处理
 */
// eslint-disable-next-line no-unused-vars
const tableRowClassName = ({ row, column, rowIndex, columnIndex }) => {
  // rowIndex: 0~4 columnIndex: 1~5
  if ((rowIndex === 0 && columnIndex === 1) || (rowIndex === 1 && columnIndex === 2) || (rowIndex === 2 && columnIndex === 3) || (rowIndex === 3 && columnIndex === 4) || (rowIndex === 4 && columnIndex === 5)) {
    return 'row-column1'
  }
  if ((rowIndex === 1 && columnIndex === 1) || (rowIndex === 2 && columnIndex === 2) || (rowIndex === 3 && columnIndex === 3) || (rowIndex === 4 && columnIndex === 4)) {
    return 'row-column2'
  }
  if ((rowIndex === 2 && columnIndex === 1) || (rowIndex === 3 && columnIndex === 2) || (rowIndex === 4 && columnIndex === 3)) {
    return 'row-column3'
  }
  if ((rowIndex === 3 && columnIndex === 1) || (rowIndex === 4 && columnIndex === 2)) {
    return 'row-column4'
  }
  if ((rowIndex === 4 && columnIndex === 1)) {
    return 'row-column5'
  }
  if ((rowIndex === 0 && columnIndex === 2) || (rowIndex === 1 && columnIndex === 3) || (rowIndex === 2 && columnIndex === 4) || (rowIndex === 3 && columnIndex === 5)) {
    return 'column-row1'
  }
  if ((rowIndex === 0 && columnIndex === 3) || (rowIndex === 1 && columnIndex === 4) || (rowIndex === 2 && columnIndex === 5)) {
    return 'column-row2'
  }
  if ((rowIndex === 0 && columnIndex === 4) || (rowIndex === 1 && columnIndex === 5)) {
    return 'column-row3'
  }
  if ((rowIndex === 0 && columnIndex === 5)) {
    return 'column-row4'
  }
  return 'row-column-other'
}
/**
 * 第二部分，选择指标时，修改柱状图右侧数据
 */
const radio2Switch = () => {
  switch (radio2.value) {
    case 1:
      trendTwoRightType = $t('groups.people')
      trendTwoRight.newValue = twoSourceData.value.newPayBuyers
      trendTwoRight.oldValue = twoSourceData.value.oldPayBuyers
      if (value3Temp === 0) {
        let newVal = twoSourceData.value.newPayBuyers / tableData2[0].custs
        newVal = (newVal * 100).toFixed(2) + '%'
        let oldVal = twoSourceData.value.oldPayBuyers / tableData2[0].custs
        oldVal = (oldVal * 100).toFixed(2) + '%'
        trendTwoTipRate[0] = newVal
        trendTwoTipRate[1] = oldVal
      } else if (value3Temp === 1) {
        trendTwoTipRate[0] = tableData2[0].custPro
      } else if (value3Temp === 2) {
        trendTwoTipRate[1] = tableData2[0].custPro
      }
      break
    case 2:
      trendTwoRightType = $t('dataAnalysis.yuan')
      trendTwoRight.newValue = twoSourceData.value.newPayAmount
      trendTwoRight.oldValue = twoSourceData.value.oldPayAmount

      if (value3Temp === 0) {
        let newVal2 = twoSourceData.value.newPayAmount / tableData2[0].payment
        newVal2 = (newVal2 * 100).toFixed(2) + '%'
        let oldVal2 = twoSourceData.value.oldPayAmount / tableData2[0].payment
        oldVal2 = (oldVal2 * 100).toFixed(2) + '%'
        trendTwoTipRate[0] = newVal2
        trendTwoTipRate[1] = oldVal2
      } else if (value3Temp === 1) {
        trendTwoTipRate[0] = tableData2[0].paymentPro
      } else if (value3Temp === 2) {
        trendTwoTipRate[1] = tableData2[0].paymentPro
      }
      break
    case 3:
      trendTwoRightType = $t('order.piece')
      trendTwoRight.newValue = twoSourceData.value.newPayProdCount
      trendTwoRight.oldValue = twoSourceData.value.oldPayProdCount
      if (value3Temp === 0) {
        let newVal3 = twoSourceData.value.newPayProdCount / twoAllProdCount
        newVal3 = (newVal3 * 100).toFixed(2) + '%'
        let oldVal3 = twoSourceData.value.oldPayProdCount / twoAllProdCount
        oldVal3 = (oldVal3 * 100).toFixed(2) + '%'
        trendTwoTipRate[0] = newVal3
        trendTwoTipRate[1] = oldVal3
      } else if (value3Temp === 1) {
        let newVal4 = tableData2[0].commons / twoAllProdCount
        newVal4 = (newVal4 * 100).toFixed(2) + '%'
        trendTwoTipRate[0] = newVal4
      } else if (value3Temp === 2) {
        let oldVal5 = tableData2[0].commons / twoAllProdCount
        oldVal5 = (oldVal5 * 100).toFixed(2) + '%'
        trendTwoTipRate[1] = oldVal5
      }
      break
  }
  getMainTwoChart()
}

const radio3 = ref(1)
watch(radio3, () => {
  radio3Switch()
})

const radio3Switch = () => {
  switch (radio3.value) {
    case 1:
      trendThreeRightType = $t('groups.people')
      trendThreeRight.newValue = threeSourceData.newPayBuyers
      trendThreeRight.oldValue = threeSourceData.oldPayBuyers
      if (value4Temp === 0) {
        let newVal = threeSourceData.newPayBuyers / tableData3[0].custs
        newVal = (newVal * 100).toFixed(2) + '%'
        let oldVal = threeSourceData.oldPayBuyers / tableData3[0].custs
        oldVal = (oldVal * 100).toFixed(2) + '%'
        trendThreeTipRate[0] = newVal
        trendThreeTipRate[1] = oldVal
      } else if (value4Temp === 1) {
        trendThreeTipRate[0] = tableData3[0].custPro
      } else if (value4Temp === 2) {
        trendThreeTipRate[1] = tableData3[0].custPro
      }
      break
    case 2:
      trendThreeRightType = $t('dataAnalysis.yuan')
      trendThreeRight.newValue = threeSourceData.newPayAmount
      trendThreeRight.oldValue = threeSourceData.oldPayAmount

      if (value4Temp === 0) {
        let newVal2 = threeSourceData.newPayAmount / tableData3[0].payment
        newVal2 = (newVal2 * 100).toFixed(2) + '%'
        let oldVal2 = threeSourceData.oldPayAmount / tableData3[0].payment
        oldVal2 = (oldVal2 * 100).toFixed(2) + '%'
        trendThreeTipRate[0] = newVal2
        trendThreeTipRate[1] = oldVal2
      } else if (value4Temp === 1) {
        trendThreeTipRate[0] = tableData3[0].paymentPro
      } else if (value4Temp === 2) {
        trendThreeTipRate[1] = tableData3[0].paymentPro
      }
      break
    case 3:
      trendThreeRightType = $t('order.piece')
      trendThreeRight.newValue = threeSourceData.newPayProdCount
      trendThreeRight.oldValue = threeSourceData.oldPayProdCount
      if (value4Temp === 0) {
        let newVal3 = threeSourceData.newPayProdCount / threeAllProdCount
        newVal3 = (newVal3 * 100).toFixed(2) + '%'
        let oldVal3 = threeSourceData.oldPayProdCount / threeAllProdCount
        oldVal3 = (oldVal3 * 100).toFixed(2) + '%'
        trendThreeTipRate[0] = newVal3
        trendThreeTipRate[1] = oldVal3
      } else if (value4Temp === 1) {
        let newVal4 = tableData3[0].commons / threeAllProdCount
        newVal4 = (newVal4 * 100).toFixed(2) + '%'
        trendThreeTipRate[0] = newVal4
      } else if (value4Temp === 2) {
        let oldVal5 = tableData3[0].commons / threeAllProdCount
        oldVal5 = (oldVal5 * 100).toFixed(2) + '%'
        trendThreeTipRate[1] = oldVal5
      }
      break
  }
  getMainThreeChart()
}

</script>
 <style lang="scss" scoped>
.cust-home {
  // 主要内容
  //第一部分
  .main-one {
    padding: 12px;
    font-size: 14px;
    margin-bottom: 1em;
  }
 :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
  background-color: #f5f7fa
}
  .one-title {
    font-size: 18px;
    font-weight: bold;
    line-height: 16px;
    color: #333333;
    margin: 0.5em 0 1em 0;
  }
  .main{
    :deep(.el-date-editor.el-input),
    :deep(.el-date-editor.el-input__inner){
    width: 194px;
    height: 32px;

  }
  }
  :deep(.el-select .el-input__wrapper){
    width: 174px;
    height: 32px;
  }
  .one-time {
    display: flex;
    background: #F7F8FA;
    vertical-align: middle;
    align-items: center;
    height: 62px;
    padding-left: 20px;
    padding-right: 20px;
    justify-content: space-between;
    .one-time-right {
      margin-left: 30px;
    }
  }

  .el-form-item {
    display: inline-block;
    margin-left: 10px;
    margin-bottom: 0;
  }

  //修改了框架的时间选择框默认样式
  :deep(.el-input__inner-change)  {
    height: 30px;
    width: 180px;
  }

  :deep(.el-input__icon) {
    line-height: 30px;
  }

  :deep(.el-date-editor.el-input),
  :deep(.el-date-editor.el-input__inner) {
    width: auto;
  }

  .time-border{
    margin: 4px 0;
  }

  .one-radio {
    margin-top: 20px;
    margin-left: -10px;
  }

  .one-table {
    padding: 1em 0;
    background: #ffffff;
  }
  .one-table :deep(.el-table__inner-wrapper tbody td){
    height: 65px;
  }
  .one-table :deep(.el-table__header-wrapper thead tr){
    background: #F7F8FA;
    height: 45px;
  }
  .one-table :deep(.el-table .row-column1)  {
    background: #d8effb;
  }

  .one-table :deep(.el-table .row-column2) {
    background: #afe4fc;
  }

  .one-table :deep(.el-table .row-column3) {
    background: #86d7fc;
  }

  .one-table :deep(.el-table .row-column4) {
    background: #5dcbfe;
  }

  .one-table  :deep(.el-table .row-column5) {
    background: #2abdff;
  }

  .one-table :deep(.el-table .column-row1) {
    background: #f9eece;
  }

  .one-table :deep(.el-table .column-row2) {
    background: #fbdb8c;
  }

  .one-table :deep(.el-table .column-row3) {
    background: #fcd160;
  }

  .one-table :deep(.el-table .column-row4) {
    background: #ffc020;
  }

  .one-table :deep(.el-table .column-row5) {
    background: #f7f8fa;
  }
  .one-table :deep(.el-table .row-column-other) {
    background: #f7f8fa;
  }
  .main-two-text div {
    margin-top: 24px;
  }

  .main-two-text div span {
    font-size: 16px;
  }

  .main-two-text p {
    color: #999999;
    font-size: 14px;
    margin-top: 6px;
  }

  .main-two-chart {
    height: 200px;
    width: 100%;
  }

  .main-two-table {
    margin: 20px 0;
  }

  .two-radio {
    width: 40%;
    float: left;
    margin-bottom: 20px;
  }

  .two-time p {
    height: 60px;
    width: 98%;
    border-top: #92949b dotted 1px;
    position: absolute;
    top: 106px;
    left: 10px;
    padding-top: 14px;
  }
}
</style>
